import { useMemo } from 'react'
import Title from '@components/title'
import style from './index.module.less'
import OrderLine from '@components/orderLine'

function Main ({ data }) {
  const statement = useMemo(() => {
    return data.statement ? data.statement : ''
  }, [data])
  if (data.evidence.length === 0) {
    return <span />
  }
  return (
    <div>
      <Title title='证据材料' />
      <div className={style.list}>
        {
          data.evidence.map((li, i) => {
            return (
              <OrderLine
                key={i}
                index={i + 1}
                value={(
                  <div>
                    <div className={style.title}>{li.name}</div>
                    <div>{li.proof}</div>
                    {
                      li.file && li.file.length > 0 && (
                        <div className={style.files}>
                          <span className={style['files-label']}>附件：</span>
                          {li.file.map((li, i) => {
                            return (
                              <span className={style.file} key={i}>
                                <a href={li.url} target='_blank'>{li.original_filename}</a>
                              </span>
                            )
                          })}
                        </div>
                      )
                    }
                  </div>
                )}
                third
              />
            )
          })
        }
      </div>
      {
       !!statement && (
          <div>
            <Title title='事实与理由' />
            <div className={style.content}>
              {statement}
            </div>
          </div>
        )
      }
    </div> 
  )
}

export default Main
